import { View, Text, Swiper, SwiperItem, Image, Picker } from "@tarojs/components";
import Taro, { FC, useDidShow } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { AtFloatLayout, AtForm, AtInput, AtList, AtListItem, AtSwitch, AtTabs, AtTabsPane, AtTextarea } from "taro-ui";
import { catchError, debounceTime, EMPTY, firstValueFrom, map, mergeMap, Subject, Subscription, switchMap, tap } from "rxjs";

import DateTimePicker from '@/components/DateTimePicker/index';
import { uploadFile, vodUploader } from '@/utils/qcloudHelpers'
import { formatTime, formatTimeDate, isPromise } from "@/utils";
import { useRoomUiFacade } from "@/hooks/useRoomUiFacade";
import { LIVE_TYPE, MUTE_STATUS, ROOMSTATS_TYPE } from "@/constants/room";
import { rsgPwdNum } from "@/utils/regexRule";
import { EditRoomParams } from "@/models/request/roomReq";
import { useAuthFacade } from '@/hooks/useAuthFacade'
import { APPROVE_STATUS } from "@/constants/user";
import { getLogger } from "@/utils/log";
import { OPTION_VALUE, PLAN_VERSIONS } from "@/constants/subscription";

import '@@/app_style'
import "taro-ui/dist/style/components/float-layout.scss";
import "taro-ui/dist/style/components/button.scss" // 按需引入
import "taro-ui/dist/style/components/radio.scss";
import "taro-ui/dist/style/components/textarea.scss";
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/image-picker.scss";
import './index.scss'

export const CreateLive: FC = () => {
  const logger = getLogger("/pages/liveRoom/createLive");
  const [roomFacade, , , , , , , , , , , , , , , , , , , , , , passwd, , , allowShare] = useRoomUiFacade();
  const [authFacade, , , , orgs, , userApprovalStatus, ,] = useAuthFacade()
  //直播设置
  const [isLiveInfo, setIsLiveInfo] = useState(false)
  const [isLiveBck, setIsLiveBck] = useState(false)
  const [isLiveSetting, setIsLiveSetting] = useState(false)

  //时间选择器开始和结束时间
  const curTime = new Date().getTime()
  const startTimeHolder = curTime + 1 * 3600 * 1000;
  const endTimeHolder = startTimeHolder + 8 * 3600 * 1000

  const [liveType, setLiveType] = useState(LIVE_TYPE.TEXT) // 直播类型
  const [roomName, setRoomName] = useState('') // 直播标题
  const [description, setDescription] = useState('')
  const [picUrl, setPicUrl] = useState(ASSETS_PATH + '/live_Blackground.png')
  const [preLoadVideo, setPreLoadVideo] = useState("")
  const [coverFile, setCoverFile] = useState("") //暖场视频
  const [startTime, setStartTime] = useState(startTimeHolder)
  const [endTime, setEndTime] = useState(endTimeHolder)
  const [pwd, setPwd] = useState(passwd)
  const [commentNum, setCommentNum] = useState(0)
  const [isShare, setIsShare] = useState(allowShare)
  const [videoUploader, setVideoUploader] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(0);  //轮播图指示器序号
  const [isSelectPlans, setisSelectPlans] = useState(false) // 显示套餐弹窗
  const [currentPlanCode, setCurrentPlanCode] = useState(PLAN_VERSIONS.FREE) // 当前套餐码
  const [currentRoomRound, setCurrentRoomRound] = useState(0) // 旗舰版单场次数
  const [isRoundsType, setIsRoundsType] = useState(false) // 是否消耗一次旗舰版次数
  // 直播套餐
  const [planMenu, setPlanMenu] = useState([{
    planCode: PLAN_VERSIONS.FREE,
    version: '免费版',
    desc: '最高支持10人观看，最长直播30分钟',
    roomRound: 0,
    expires: '无限制',

  }])


  const initSubject = () => new Subject<any>();
  // 初始化按钮接收参数subject，所有按钮或者操作都可以通过这个emmiter触发
  const [emitter, setEmitter] = useState<Subject<any>>(initSubject);

  //暖场视频
  const [coverFileUrl, setCoverFileUrl] = useState({
    tempFilePaths: [""],
    tempFiles: [{
      path: "",
      size: 0
    }],
    errMsg: ""
  })

  // 设置直播信息
  const handleChange1 = (value) => {
    setRoomName(value)
  }

  const handleChange4 = (value) => {
    setDescription(value)
  }

  // 直播类型
  const list = [
    {
      title: '1. 图文',
      name: '图文直播(免费)',
      desc: '以图文的方式进行直播',
      // src: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/图文.png',
      src: ASSETS_PATH + '/TextLive.png',

      current: 0
    }, {
      title: '2. 语音',
      name: '语音直播(免费)',
      desc: '以语音的方式进行直播',
      // src: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/语音.png',
      src: ASSETS_PATH + '/AudioLive.png',

      current: 1
    }, {
      title: '3. 视频',
      name: '视频直播',
      desc: '以视频的方式进行直播',
      // src: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/视频.png',
      src: ASSETS_PATH + '/VideoLive.png',
      current: 2
    }, {
      title: '4. OBS直播',
      name: 'OBS直播',
      desc: '用专门设备的专业直播',
      // src: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/专业.png',
      src: ASSETS_PATH + '/OBSLive.png',

      current: 4
    },
  ]

  // 套餐
  // const menu = [
  // ]

  // 评论类型
  const commentList = [{
    label: '正常发言',
    value: MUTE_STATUS.NORMAL,
  }, {
    label: '全局禁言',
    value: MUTE_STATUS.BANNED,
  },
  {
    label: '先审后发',
    value: MUTE_STATUS.PENDING,
  },]

  //开始时间
  const pickStart = (value) => {
    //兼容安卓和iOS，否则iOS的日期显示有问题
    const time = value.current.replace(/-/g, '/');

    const start = new Date(time).getTime();
    setStartTime(start);
    const newEndTiemV = start + 8 * 3600 * 1000
    setEndTime(newEndTiemV);
  }

  //结束时间
  const pickEnd = (value) => {
    const time = value.current.replace(/-/g, '/');

    const end = new Date(time).getTime();
    if (0 < end - startTime && end - startTime < 8 * 3600 * 1000) {
      setEndTime(end)
    } else {
      Taro.showToast({
        title: '结束时间不能大于8小时或小于开始时间',
        icon: 'none',
        duration: 2000
      })
      setEndTime(startTime + 8 * 3600 * 1000)
    }
  }
  //上传封面
  const pickImage = (pos: string) => {
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头 
      success: function (res) {
        setCoverFileUrl(res)
        // console.log(res, '选中的图片');
        uploadFile(res.tempFilePaths[0],
          (resUrl: string) => {
            //Fixme， 上传完成之前，都不允许点击保存按钮，否则请求后端的图片参数为空
            setPicUrl(resUrl);
          }
        )
      }
    })
  }
  //删除封面
  const handleDelImg = () => {
    setPicUrl("");
  }
  //上传暖场视频
  const pickVideo = (pos: string) => {
    // Taro.chooseVideo({
    Taro.chooseMedia({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        console.log('res的结果：', res)
        const tempFiles = res.tempFiles[0]
        // const fileUrl = picUrl;
        const fileUrl = tempFiles.thumbTempFilePath; // 暖场视频封面
        const uploader = vodUploader({ mediaFile: tempFiles, coverFile: coverFileUrl },
          uploadRes => {
            console.log("结果", uploadRes);
            setPreLoadVideo(uploadRes.videoUrl);
            setCoverFile(fileUrl)
          },
          err => console.error("返回结果1", err)
        )
        setVideoUploader(uploader);
      },
    })
  }
  //删除暖场视频
  const deleteVideo = () => {
    setCoverFile("");
  }

  //轮播图1
  const SelectOptions = (e) => {
    const current = e
    setCurrentIndex(current)
    setLiveType(
      current === 0 ?
        LIVE_TYPE.TEXT : current === 1 ?
          LIVE_TYPE.AUDIO : current === 2 ?
            LIVE_TYPE.VIDEO : LIVE_TYPE.OBS
    )
    // console.log(current, liveType, '直播类型');
  }

  //轮播图2
  const handleOptions = (e) => {
    const current = e.detail.current
    const code = planMenu[current].planCode
    setCurrentPlanCode(code)
    console.log('dangqian序号：', current, code)
  }

  // 允许分享
  const handleShare = () => {
    setIsShare(!isShare)
  }
  // 密码设置
  const handleSettingPwd = (value) => {
    setPwd(value)

  }
  //评论设置
  const handleComment = (e) => {
    setCommentNum(Number(e.detail.value))

  }

  // 点击选择套装
  const selectPlans = () => {
    setisSelectPlans(!isSelectPlans)
  }

  // 点击直播信息
  const getLiveInfo = () => {
    setIsLiveInfo(!isLiveInfo)
  }
  // 点击直播封面
  const getLiveBck = () => {
    setIsLiveBck(!isLiveBck)
  }
  // 点击直播设置
  const getLiveSetting = () => {
    setIsLiveSetting(!isLiveSetting)
  }

  // 保存直播信息
  const saveLiveInfo = () => {
    setRoomName(roomName)
    // setOwnerName(ownerName)
    setStartTime(startTime)
    setEndTime(endTime)
    setDescription(description)
    setIsLiveInfo(!isLiveInfo)
    Taro.showToast({
      title: '保存成功',
      icon: "none",
      duration: 2000
    })
  }
  // 保存直播封面
  const saveLiveBck = () => {
    setPicUrl(picUrl)
    setPreLoadVideo(preLoadVideo)
    setIsLiveBck(!isLiveBck)
    Taro.showToast({
      title: '保存成功',
      icon: "none",
      duration: 2000
    })
  }
  // 保存直播设置
  const saveLiveSetting = () => {


    setCommentNum(commentNum)
    setIsShare(isShare)
    //无密码直接保存，有密码加一段校验
    if (pwd === '') {

      setPwd(pwd)
    } else {
      // 免费版不能设密码
      if (currentPlanCode === PLAN_VERSIONS.FREE) {
        setPwd('')
        throw Taro.showToast({
          title: '此套餐不包括密码观看功能',
          icon: "none",
          duration: 2000
        })
      }
      rsgPwdNum(pwd)
      setPwd(pwd)
    }
    setIsLiveSetting(!isLiveSetting)
    Taro.showToast({
      title: '保存成功',
      icon: "none",
      duration: 2000
    })
  }
  //把按钮点击事件转化为observable
  const editLive$ = emitter.asObservable()
    .pipe(
      //防抖动(防重复)
      debounceTime(500),
      map(obj => obj as EditRoomParams),
      //接收按钮点击的参数
      mergeMap(async editLiveObj => {
        console.log("editLiveObj:", editLiveObj)

        if (!editLiveObj.roomName) {
          setIsLiveInfo(!isLiveInfo)
          throw Taro.showToast({
            title: '请输入直播间名称',
            icon: 'none',
            duration: 2000
          })
        }
        if (!editLiveObj.description) {
          setIsLiveInfo(true)
          throw Taro.showToast({
            title: '请输入简介',
            icon: 'none',
            duration: 2000
          })
        }
        if (!editLiveObj.startTime) {
          throw Taro.showToast({
            title: '请输入开始时间',
            icon: 'none',
            duration: 2000
          })
        }
        if (!editLiveObj.endTime) {
          throw Taro.showToast({
            title: '请输入结束时间',
            icon: 'none',
            duration: 2000
          })
        }
        if (!editLiveObj.picUrl) {
          throw Taro.showToast({
            title: '请选择直播间封面',
            icon: 'none',
            duration: 2000
          })
        }

        //以下部分为订阅相关套餐的检查
        let preCheckOptions: string[] = [];
        let tip = "";

        switch (editLiveObj.type) {
          case LIVE_TYPE.OBS:
            {
              preCheckOptions.push(OPTION_VALUE.CREATE_OBS);
              tip = "此套餐不能创建OBS直播";
              break;
            }
          case LIVE_TYPE.OBS_REC:
            {
              preCheckOptions.push(OPTION_VALUE.CREATE_OBS_REC);
              tip = "此套餐不能创建录播";
              break;
            }
          case LIVE_TYPE.REBROADCAST:
            {
              preCheckOptions.push(OPTION_VALUE.CREATE_REBROADCAST);
              tip = "此套餐不能创建转推拉流直播";
              break;
            }
          case LIVE_TYPE.VR:
            {
              preCheckOptions.push(OPTION_VALUE.CREATE_360VR);
              tip = "此套餐不能创建转推拉流直播";
              break;
            }
          default:
            break;
        }

        const typeCheckStatus = await firstValueFrom(authFacade.checkSubs(preCheckOptions));
        console.log(preCheckOptions, '该是create_obs', typeCheckStatus);
        if (!typeCheckStatus) {
          throw Taro.showToast({
            title: tip,
            icon: 'none',
            duration: 2000
          })
        }

        if (editLiveObj.passwd) {
          preCheckOptions = [OPTION_VALUE.ROOM_PASSWD];
          const pswdCheckStatus = await firstValueFrom(authFacade.checkSubs(preCheckOptions));
          if (!pswdCheckStatus) {
            throw Taro.showToast({
              title: "此套餐不包括密码观看功能",
              icon: 'none',
              duration: 2000
            })
          }
        }

        if (editLiveObj.planCode === PLAN_VERSIONS.FREE && editLiveObj.type && [LIVE_TYPE.OBS, LIVE_TYPE.OBS_REC, LIVE_TYPE.VR, LIVE_TYPE.REBROADCAST].includes(editLiveObj.type)) {
          throw Taro.showToast({
            title: "选择免费套餐不能创建其他直播",
            icon: 'none',
            duration: 2000
          })
        }

        return editLiveObj;
      }),
      switchMap(roomFacade.createRoom)
    )

  // 根据套餐对应支持的功能
  useEffect(() => {
    if (liveType === LIVE_TYPE.OBS && currentPlanCode !== PLAN_VERSIONS.ULTIMATE) {
      Taro.showToast({
        title: '此套餐不能创建OBS直播',
        icon: 'none',
        duration: 2000
      })
    }
  }, [liveType, currentPlanCode])

  useEffect(() => {
    //注册并执行所有rxjs流
    const subscriptions: Subscription[] = [
      editLive$
        .pipe(
          catchError(err => {
            //异常时恢复emitter以便可以重新触发点击
            setEmitter(initSubject);
            if (isPromise(err)) {
              return EMPTY;
            }

            //点击直播时就应该判断是否认证
            else if (userApprovalStatus !== APPROVE_STATUS.SUCCESS && userApprovalStatus === APPROVE_STATUS.NEVER) { //实名认证提醒弹窗，并重定向到认证页面
              // console.log('目前的个人认证状态', userApprovalStatus);
              Taro.showToast({
                title: "实名认证通过才能创建直播",
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                Taro.redirectTo({
                  // url: '/pages/my/userVerify/index'
                  url: '/subPages/my/userVerify/index'
                })
              }, 2000)
              return EMPTY;
            }
            else if (userApprovalStatus !== APPROVE_STATUS.SUCCESS && userApprovalStatus === APPROVE_STATUS.PENDING) { //实名认证提醒弹窗，并重定向到认证页面
              // console.log('目前的个人认证状态', userApprovalStatus);
              Taro.showToast({
                title: "实名认证通过才能创建直播",
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                Taro.redirectTo({
                  // url: '/pages/my/editInfo/index'
                  url: '/subPages/my/editInfo/index'
                })
              }, 2000)
              return EMPTY;
            }
            else if (err.message.indexOf("系统错误") > -1) {
              Taro.showToast({
                title: "系统错误，请稍后重试",
                icon: 'none',
                duration: 2000
              })
              return EMPTY;
            } else {
              throw new Error("其他未知错误");
            }
          }),
          switchMap(newRoomId => {
            return roomFacade.saveRoomStat(newRoomId, ROOMSTATS_TYPE.CREATED)
              .pipe(
                tap(() => {
                  Taro.showToast({
                    title: '创建成功',
                    icon: 'none',
                    duration: 2000
                  })
                  Taro.redirectTo({
                    url: `/pages/liveRoom/LiveDetails/index?roomId=${newRoomId}`
                  })
                })
              )
          })
        )
        .subscribe({
          next: () => console.log('创建时间: ', startTime, endTime),
          error: err => {
            //异常时恢复emitter以便可以重新触发点击
            setEmitter(initSubject);
            logger.ERROR("保存信息失败！", err);
          }
        })
    ]

    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => { subscriptions.map(sub => sub.unsubscribe()) };
  }, [emitter, userApprovalStatus]);


  // 创建直播按钮
  const createLive = () => {
    // 判断是否选择了单场旗舰版
    emitter.next({
      roomName, // 房间名
      description, // 简述
      picUrl, // 背景图
      type: liveType, // 直播类型
      startTime: new Date(startTime),
      endTime: new Date(endTime),
      preLoadVideo, // 暖场视频
      allowShare: isShare, // 分享
      passwd: pwd, // 密码
      // pauseVideo: pauseFile,
      muteStatus: commentNum, // 评论
      planCode: currentPlanCode, // 套餐码
      isRoundsType: isRoundsType, // 是否消耗旗舰版次数
      orgId: orgs[0]?.orgId ?? '' // 带上单位认证
    })
  }

  useDidShow(() => {
    // 获取认证状态
    firstValueFrom(authFacade.getapproveStatus());
  })

  useEffect(() => {
    updateSubs()
  }, [])

  // 更新套餐信息
  const updateSubs = () => {
    firstValueFrom(authFacade.getSubs()).then(res => {
      console.log('订阅信息', res, formatTimeDate(new Date(res.expires)));
      if (!!res.planCode && res.planCode !== PLAN_VERSIONS.FREE) {
        // 当前用户有套餐
        if (!!res.expires && res.expires > new Date().getTime()) {
          const option = {
            version: res.planName,
            desc: res.planMemo,
            expires: formatTimeDate(new Date(res.expires)),
            roomRound: 0,
            planCode: res.planCode
          }
          planMenu.push(option)
        }
        // 当前用户有买单场次
        if (res.roomRound) {
          const option = {
            version: '旗舰版',
            desc: '旗舰版单场次',
            expires: '',
            roomRound: res.roomRound,
            planCode: PLAN_VERSIONS.ULTIMATE,
          }
          setCurrentRoomRound(res.roomRound)
          planMenu.push(option)
        }
        setPlanMenu(JSON.parse(JSON.stringify(planMenu)))
      }
    });
  }

  // 判断是否消耗旗舰版次数
  const updatePlanCode = () => {
    if (currentPlanCode === PLAN_VERSIONS.ULTIMATE && currentRoomRound !== 0) {
      // 如果此时用的是单场次的旗舰版，则在创建直播间的时候多传一个字段
      setIsRoundsType(true)

      console.log('使用单场次旗舰版', true, currentPlanCode);
    } else {
      setIsRoundsType(false)
      console.log('使用单场次旗舰版', false);
    }
  }
  useEffect(() => {
    updatePlanCode()
  }, [currentPlanCode])

  return (
    <View className='index'>
      <View className='main'>
        {/* 轮播图 */}
        {/* <Swiper className='swiper' current={0} onChange={SelectOptions} indicatorColor='#E6E6E6' indicatorActiveColor='#D20202'>
          {
            list.map((item, index) => (
              <SwiperItem key={String(index)} className='swiper-item'>
                <View className='item'>
                  <View className='item-img'><Image src={item.src}></Image></View>
                  <View>
                    <View className='item-name'>{item.name}</View>
                    <View className='item-desc'>{item.desc}</View>
                  </View>
                </View>
              </SwiperItem>
            ))
          }
        </Swiper>
        <View className='spot-pagination'>
          {list.map((item, index) => (
            <View key={index} className={'spot-pagination-bullet ' + ((currentIndex == index) ? 'spot-pagination-bullet-active' : '')}></View>
          ))}
        </View> */}
        <View className='selectType'>请选择直播类型</View>
        {/* 选择直播类型 */}
        <AtTabs current={currentIndex} tabList={list} onClick={SelectOptions} className='at-tabs'>
          {list.map((item, index) => (
            <AtTabsPane current={item.current} index={item.current} key={String(index)} className='at-tabs-pane'>
              <View className='item'>
                <View className='item-img'><Image src={item.src} className='item-img' mode='aspectFit'></Image></View>
                <View>
                  <View className='item-name'>{item.name}</View>
                  <View className='item-desc'>{item.desc}</View>
                </View>
              </View>
            </AtTabsPane>
          )
          )}
        </AtTabs>


        {/* 选项卡 */}
        {
          liveType !== LIVE_TYPE.TEXT && liveType !== LIVE_TYPE.AUDIO && (
            <View className='options'>
              <Swiper className='options-swiper' onChange={handleOptions} indicatorDots={planMenu.length > 1 ? true : false} indicatorColor='#E6E6E6' indicatorActiveColor={MAIN_COLOR}>
                {planMenu.map((item, index) => (
                  <SwiperItem key={String(index)} className={item.version === '旗舰版' ? "options-tips vip" : "options-tips"}>
                    <View className='tips'>
                      <View className='tips-title'>使用套餐: {item.version}</View>
                      <View className='tips-desc'>{item.desc}</View>
                      {!!item.roomRound && <View className='tips-num'>剩余场次: {item.roomRound}场</View>}
                      {!!item.expires && <View className='tips-desc'>有效日期: {item.expires}</View>}
                    </View>
                  </SwiperItem>
                ))}
              </Swiper>
            </View>
          )
        }

        {/* 设置 */}
        <View className={liveType === LIVE_TYPE.OBS && currentPlanCode !== PLAN_VERSIONS.ULTIMATE ? 'setting flag-create' : 'setting'}>
          {/* <View className='setting'> */}
          <View className='setting-item' onClick={getLiveInfo}>
            <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/liveInfo.png'></Image>
            <Text>直播信息</Text>
            {(!roomName || !description) && (<View className='icon'></View>)}
          </View>
          <View className='setting-item' onClick={getLiveBck}>
            <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/liveBck.png'></Image>
            <Text>直播封面</Text>
          </View>
          <View className='setting-item' onClick={getLiveSetting}>
            <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/liveSetting.png'></Image>
            <Text>直播设置</Text>
          </View>
        </View>
      </View>

      {/* 设置直播信息 */}
      <AtFloatLayout isOpened={isLiveInfo} title='直播信息' onClose={getLiveInfo}>
        <View className='live-model'>
          <AtForm>
            <AtInput
              name='value1'
              title='直播标题'
              type='text'
              placeholder='编辑直播标题'
              value={roomName}
              onChange={handleChange1.bind(this)}
              className='text'
            >
              <View className='icon'>*</View>
            </AtInput>
            {/* <AtInput
              name='value2'
              title='主持人'
              type='text'
              placeholder='填写主持人昵称'
              value={ownerName}
              onChange={handleChange2.bind(this)}
              className='text'
            >
            </AtInput> */}
            <DateTimePicker onOk={pickStart} wrap-class='my-class' select-item-class='mySelector' title='开始时间' placeholder={formatTime(new Date(startTime))} />
            {/* <View className='border'></View> */}
            <DateTimePicker onOk={pickEnd} wrap-class='my-class' select-item-class='mySelector' title='结束时间' placeholder={formatTime(new Date(endTime))} />
            <View className='describe'>
              <View>简介</View>
              <View className='icon1'>*</View>
            </View>
            <AtTextarea
              className='content'
              placeholder='请输入简介……'
              maxLength={60}
              value={description}
              onChange={handleChange4.bind(this)}
            />
          </AtForm>
        </View>
        {/* 保存按钮 */}
        <View className='bt-save' onClick={saveLiveInfo}>
          <Text>保存</Text>
        </View>
      </AtFloatLayout>

      {/* 直播背景 */}
      <AtFloatLayout isOpened={isLiveBck} onClose={getLiveBck} title='直播封面'>
        <View className='live-model'>
          <View className='check-img'>
            <Image src={picUrl} className='pick' onClick={() => pickImage("")}></Image>
            <View className='icon-del' onClick={handleDelImg} style={{ display: picUrl.length > 0 ? "block" : "none" }}>
              <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/trash.png' className='iconDel_img'></Image>
            </View>
            <View className='check-img-title' style={{ display: picUrl.length > 0 ? "none" : "block" }}>建议尺寸16:9，不超过1MB</View>
          </View>
          <View className='title1'>
            <Text className='push'>上传封面</Text>
          </View>
          <View className='border'></View>
          <View className='pickVideo'>
            <Image src={coverFile} className='pick1' onClick={() => pickVideo("")}></Image>
            <View className='iconDelVideo' onClick={deleteVideo} style={{ display: coverFile.length > 0 ? "block" : "none" }}>
              <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/trash.png' className='delVideo_img'></Image>
            </View>
            <View className='size' style={{ display: coverFile.length > 0 ? "none" : "block" }}>建议尺寸16:9，不超过200MB</View>
            <View className='play' style={{ display: coverFile.length > 0 ? "block" : "none" }}>
              <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/play.png' className='play_img'></Image>
            </View>
            <View className='title1'>
              <Text className='push'>使用暖场视频</Text>
            </View>
          </View>
          {/* 保存按钮 */}
        </View>
        <View className='bt-save' onClick={saveLiveBck}>
          <Text>保存</Text>
        </View>
      </AtFloatLayout>

      {/* 直播设置 */}
      <AtFloatLayout isOpened={isLiveSetting} onClose={getLiveSetting} title='直播设置'>
        <View className='live-model live-font'>

          <AtForm>
            <AtSwitch title='允许分享' checked={isShare} onChange={handleShare} color={MAIN_COLOR} />
          </AtForm>
          <AtInput
            className='input'
            name='value2'
            title='观看密码'
            type='number'
            placeholder='默认无密码'
            value={pwd}
            onChange={handleSettingPwd.bind(this)}
          >
          </AtInput>
          <Picker mode='selector' value={commentList[commentNum].value} range={commentList} rangeKey='label' onChange={handleComment}>
            <AtList>
              <AtListItem
                title='评论设置'
                extraText={commentList[commentNum].label}
              />
            </AtList>
          </Picker>
        </View>
        {/* 保存按钮 */}
        <View className='bt-save' onClick={saveLiveSetting}>
          <Text>保存</Text>
        </View>
      </AtFloatLayout>

      {/* 创建按钮 */}
      {/* <View className='bt' onClick={createLive}> */}
      <View className={liveType === LIVE_TYPE.OBS && currentPlanCode !== PLAN_VERSIONS.ULTIMATE ? 'bt flag-create' : 'bt'} onClick={createLive}>
        <Text>创建直播</Text>
      </View>
    </View >
  )
}

export default CreateLive

